<template>
	<a-modal :width="650" :bodyStyle="{padding: 0}" centered :visible="visible" :mask-closable="false" title="预览" @cancel="handleClose" :footer="null">
		<div class="swiper_con" v-if="visible">
			<swiper @slideChangeTransitionEnd="handleSwiperChange" direction="horizontal" :loop="false"
				:autoplay="{ disableOnIntercation: false, autoplay: false, delay: 3000 }" :slidesPerView="1"
				:spaceBetween="0" :centeredSlides="false" :modules="modules">
				<swiper-slide v-for="(item, index) in coverArr" :key="index">
					<div class="swiper_item">
						<img :src="item" alt="" />
					</div>
				</swiper-slide>
			</swiper>
			
			<div class="swiper_bottom">
				<a-progress status="exception" strokeColor="#2878FF" :showInfo="false" style="width: 20px; margin-left: 10px;" :strokeWidth="3"
				 v-for="(item, index) in swiperList" :key="index" :percent="item.percent" />
			</div>
		</div>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		nextTick,
		computed,
		watch,
		onMounted
	} from "vue";
	import {
		Swiper,
		SwiperSlide
	} from 'swiper/vue';
	import {
		Autoplay,
		Pagination
	} from 'swiper/modules';
	import 'swiper/css';
	const modules = [Autoplay, Pagination];
	import { useTimeoutPoll } from "@vueuse/core";
	export default defineComponent({
		components: {
			Swiper,
			SwiperSlide
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			coverArr: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		setup(props, context) {
			
			const state = reactive({
				swiperList: [],
				count: 100,
				currentIndex: 0
			})

			const handleClose = () => {
				context.emit('close')
			}
			
			const computePercent = () => {
				if(state.count < 3000){
					state.count += 100
					state.swiperList[state.currentIndex]['percent'] = state.count/3000 * 100
				} else {
					pause()
				}
			}
			
			const { pause, resume } = useTimeoutPoll(computePercent, 100);
			
			const handleSwiperChange = (e) => {
				state.currentIndex = e.activeIndex
				state.count = 100
				state.swiperList.map(item=>{
					if(item.index == e.activeIndex){
						item['percent'] = 100
					} else {
						item['percent'] = 0
					}
				})
				// if(state.swiperList?.length){
				// 	resume()
				// }
			}
			
			watch(() => props.visible, val => {
				if(val){
					state.swiperList = []
					state.count = 100
					state.currentIndex = 0
					state.swiperList = props.coverArr.map((item, index)=>{
						if(index == 0) {
							return {
								index,
								percent: 100
							}
						} else {
							return {
								index,
								percent: 0
							}
						}
					})
					// if(state.swiperList?.length){
					// 	resume()
					// }
				} else {
					// pause()
				}
			})

			return {
				...toRefs(state),
				modules,
				handleClose,
				handleSwiperChange
			};
		},
	});
</script>

<style lang="less" scoped>
	.swiper_con {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.swiper_bottom{
			position: absolute;
			width: 100%;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			left: 0;
			bottom: 10px;
			z-index: 999;
		}
		.swiper-slide {
			width: 743px;
			height: 426px;
			transition: all 0.3s ease-in-out;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			.swiper_item {
				width: 242px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				img{
					max-width: 242px;
					max-height: 100%;
				}
			}
		}
	}
</style>